<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link type="text/less" rel="stylesheet" href="./less/lbbox.less">
    <script src="./js/less.js"></script>
    </style>
  </head>
  <body>
    <div class="outbox">
      <div class="box">
        <div class="lb_box">
          <img src="./img/企鹅1.jpg" />
          <img src="./img/企鹅2.jpg" />
          <img src="./img/企鹅3.png" />
          <img src="./img/企鹅4.jpg" />
          <img src="./img/企鹅1.jpg" />
        </div>
      </div>
      <p class="left_bottum"></p>
      <p class="right_bottum"></p>
      <ul class="pages">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <!-- //引用封装函数 -->
    <script src="./js/utils.js"></script>
    <script>
        //获取需要的元素
        var box = $('.box');
        var lb_box = $('.lb_box');
        var imgs  = $('.lb_box img');
        var left_bt = $('.left_bottum');
        var right_bt= $('.right_bottum');
        var pages = $('.pages li');
        var timer ; //获取计时器id；
        var imgindex = 0 ; //记录图片的下标
        var pageindex = 0 ; //记录分页的下标

        // lb_box.style.width=(imgs.length-1)*box.clientWidth+'px';
        
        //创建一个函数，其作用是能让轮播图循环播放
        function aotuPlay(){
          timer = setInterval(function(){
            //顺着播放，也可也调用 movePrev 逆播放
            moveNext();
          },3000)
        }
        aotuPlay();
        //第一步给页脚添加点击事件
        for(var i = 0 ; i<pages.length ; i++){
          //给page[i]的属性添加一个下标
          pages[i].index=i;
          //当点击分页小圆触发事件
          pages[i].onclick =  function(){
            clearInterval(timer);//清除循环播放计时器id
            imgindex = this.index;//将page[i]属性的值赋给imgindex；

            //调用animate函数 移动滚动条
            animate(box,'scrollLeft',imgindex*box.clientWidth)

            //点击触发事件的时候清分页样式
            pages[pageindex].className='';
            // 将怕page[i]属性的值赋值给pageindex
            pageindex = this.index;
            //给pages相对应的下标添加样式
            pages[pageindex].className='active';

            //上面的clearInterval先清除计时器id
            //然后再去执行播放函数，又赋值给timer计时器id
            aotuPlay();
          }
        }

        //当事件触发的时候执行此函数
        function moveNext(){
          //imgindex ++ 自增 
          imgindex++;
          //判断我的imginex 的下标等于imgs元素集合长度时
          if(imgindex === imgs.length){
              //imgindex 下标返回一
              imgindex=1;
              //box的滚动条横向返回0的位置
              box.scrollLeft=0;
          }
          //执行animate封装函数
          animate(box,'scrollLeft',imgindex*box.clientWidth);
          // page[pageindex].className='';  

          //分页切换
          //分页的下标第一个开始class值没有，清除样式，less文件设置了默认样式
          pages[pageindex].className='';
          //pageindex 下标++；
          pageindex++;
          console.log(pageindex+'-----------');
          //判断pageindex 值等于pages伪数组的长度的时候；
          //pageindex 变为0 也就是回到pages[0]
          if(pageindex===pages.length){
            pageindex=0;
          }
          //pages[0].class 添加class这个样式
          pages[pageindex].className='active';
        }
        // console.log(moveNext);
        function movePrev(){
          //当放回上一页的元素被触发的时候执行此函数
          // imgindex 的下标则会-1；
            imgindex--;
            //判断我的imgindex的下标小于0的时候
            if(imgindex < 0){
              //则返回倒数第二张图片，因为第一张添加到了最后一张图的后面
                imgindex=imgs.length-2;
                //此时的box的滚动条的位置就等于imgs.length-1
                //减1是减去最后添加的图片
                box.scrollLeft=(imgs.length-1)*box.clientWidth;
            }
            animate(box,'scrollLeft',imgindex*box.clientWidth);

            pages[pageindex].className='';
            pageindex--;
            if(pageindex<0){
              pageindex=pages.length-1;
            }
            pages[pageindex].className='active';
        }

        //左右两侧的按钮触发事件
        //上一页的触发事件
        left_bt.onclick=function(){
          //清除计时器
          clearInterval(timer);
          //执行上一页函数
          movePrev();
          //执行播放函数
          aotuPlay();
        }

        //下一页的触发事件
        right_bt.onclick=function(){
          clearInterval(timer);
          moveNext();
          aotuPlay();
        }

    </script>
  </body>
</html>
